<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>数据查询页面</title>
    <header th:replace="header.html"></header>
</head>


<body class="layui-layout-body">
<div class="layui-body" style="margin:60px 0 0 30px ">


    <h1>副本集节点信息</h1>
    <div class="layui-bg-gray" style="padding: 16px;">

        <div id="view" class="layui-row layui-col-space12">
        </div>
    </div>



</div>

</body>

<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    </div>
</script>

<script id="TPL" type="text/html">

    {{# layui.each(d, function(index, item){ }}

    <div class="layui-col-md2">

        <div class="layui-card">
            <div class="layui-card-header" style="background-color: #009f95">
                <h4>结点：<span>{{-item.id}}</span></h4></div>
            <div class="layui-card-body">
                ip：<span id="ip{{-item.id}}">{{-item.name}}</span></br>
                health：<span id="health">{{-item.health}}</span></br>
                state：<span id="state">{{-item.state}}</span></br>
                stateStr：<span id="stateStr">{{-item.stateStr}}</span></br>
            </div>
            <!--            <button id="selectBtn{{-item.id}}" type="button" class="layui-btn layui-btn-radius">查询</button>-->
        </div>
    </div>
    {{# }); }}
    <p>{{# if(d.length === 0){ }}
        无数据
        {{# } }}</p>
</script>

<script type="text/javascript" th:inline="none">
    layui.use(function () {
        var table = layui.table;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var $ = layui.$;
        var layer = layui.layer;
        var nodedata;




        // 渲染 副本集节点信息
        $(function () {
            $.ajax({
                type: "GET",
                url: "/api/node/getReplicaSetInfo",
                // async: false,
                success: function (res) {
                    console.log(res);
                    if (res.code === 0) {

                        nodedata = res.data
                        var getTpl = document.getElementById('TPL').innerHTML; // 获取模板字符
                        var elemView = document.getElementById('view'); // 视图对象

                        // 渲染并输出结果
                        laytpl(getTpl).render(nodedata, function (str) {
                            elemView.innerHTML = str;
                        });
                    }
                }
            })
        })

        $(function () {
            $.ajax({
                type: "GET",
                url: "/api/node/getReplicaSetInfo",
                // async: false,
                success: function (res) {
                    var jsonData = res.data
                    if (res.code === 0) {
                        var serverSelect = document.getElementById('port');
                        var serverNameInput = document.getElementById('ipaddr');
                        serverNameInput.value = jsonData[0].name.split(':')[0];
                        // 循环遍历JSON数据并提取端口号，然后添加为下拉框选项
                        for (var i = 0; i < jsonData.length; i++) {
                            var option = document.createElement('option');
                            var port = jsonData[i].name.split(':')[1]; // 提取端口号
                            option.value = jsonData[i].id;
                            option.text = port;
                            serverSelect.appendChild(option);
                        }
                        // 使用LayUI的form.render()方法来更新表单元素
                        form.render('select');
                    }
                }
            })
        })



        // 搜索提交
        form.on('submit(demo-table-search)', function (data) {
            var field = data.field; // 获得表单字段
        });
    })
</script>


</html>